<template>
  <span v-if="data" class="design-use-time" :style="styles">{{ text }}</span>
</template>

<script setup lang="ts" name="designUseTime">
import { computed } from 'vue';
import { DesignWork } from '/@/models';
import dayjs from 'dayjs';

interface IProps {
  data: DesignWork;
}

const props = defineProps<IProps>();

const text = computed(() => {
  console.log(props);
  if (!props.data.start_date) {
    return '-';
  }

  if (props.data.complete_date) {
    return dayjs(props.data.complete_date).diff(props.data.start_date, 'day') + 1 + '天';
  }

  return dayjs().diff(props.data.start_date, 'day') + '天';
});

const styles = computed(() => {
  let isOver = false;

  if (props.data.complete_date) {
    isOver = dayjs(props.data.complete_date).isAfter(props.data.end_date);
  } else {
    isOver = dayjs().isAfter(props.data.end_date);
  }

  if (isOver) {
    return {
      color: '#F00404',
    };
  }

  return undefined;
});
</script>
